<script setup>
import { ref, reactive, onMounted, onUnmounted } from "vue";

import baseModel from "@/components/baseModel/baseModel.vue";

const emit = defineEmits(["isClose"]);

const imgUrl = ref("");

const dialog = ref(null);

const open = (url) => {
  // 视频开始时间设为第一秒
  imgUrl.value = url;
  dialog.value && dialog.value.showModal();
};

const close = () => {
  dialog.value && dialog.value.closeModal();
};

const isClose = () => {
  emit("isClose");
};

defineExpose({
  open,
  close,
});
</script>

<template>
  <baseModel
    :title="'查看图片'"
    ref="dialog"
    :contentWidth="800"
    :zIndex="2000"
    @isClose="isClose"
  >
    <template #content>
      <div class="content" :key="videoUrl">
        <img :src="imgUrl" alt="" />
      </div>
    </template>
    <template #footer>
      <slot name="isfooter">
        <a-button type="primary" @click="close">关闭</a-button>
      </slot>
    </template>
  </baseModel>
</template>

<style lang="less" scoped>
.content {
  width: 100%;
  height: 500px;
  display: flex;
  justify-content: center;
  background: #000000;

  img {
    height: 100%;
    width: 100%;
    object-fit: contain;
  }
}
</style>
